<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>

<link rel="stylesheet" href="css/shop.css">
<style >
    @font-face {
        font-family: 'cm';
        src: url("font/Begilas.otf");
    }

    #BackLink{
        top: 20px;
    }

</style>

<body>
<div class="display">

    <div id="Catalog">

        <div class="PetPicAndName">${sessionScope.product.description}
            ${sessionScope.product.name}</div>

        <table>
            <tr>
                <th>Product ID</th>
                <th>Description</th>
                <th>List Price</th>
                <th style="border: none">&nbsp;</th>
            </tr>
            <c:forEach var="item" items="${sessionScope.itemList}">
                <tr>
                    <td>${item.itemId}</td>
                    <td>${item.attribute1} ${item.attribute2} ${item.attribute3}
                            ${item.attribute4} ${item.attribute5}</td>
                    <td><fmt:formatNumber value="${item.listPrice}" pattern="$#,##0.00"/></td>
                    <td style="border: none">
                        <a href="addItemToCart?workingItemId=${item.itemId}"><button id="buyButton"></button></a>
                    </td>
                </tr>
            </c:forEach>
        </table>

    </div>


    <div id="BackLink" backTo="${sessionScope.backTo}">
        <a href="cartForm">
        <button><span>回到购物车</span></button>
        </a>
        <a href="mainForm">
            <button onclick="back()"><span>返回主页面</span></button>
        </a>
    </div>

</div>
</body>

<script>
    $(function (){
        $('#BackLink').on("click",function (){
            var height=$('#BackLink').attr("backTo");
            console.log(height);
            sessionStorage.setItem("back","true");
            sessionStorage.setItem("to",height);
        })
    })
</script>
